<script>
import {addOrEditStudent, delStudents, studentPage} from "@/api/student";

export default {
  name: "StudentView",
  data() {
    return {
      title: "新增",
      total: 0,
      size: 5,
      currentPage: 1,
      tableData: [],
      multipleSelection: [],
      form: {
        id: '',
        stuName: '',
        stuNo: '',
        age: '',
        sex: '',
        major: '',
        schoolTime: ''
      },
      formLabelWidth: "80px",
      dialogFormVisible: false,   //  true  弹窗显示   false  隐藏
      rules: {
        stuName: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
        ],
        stuNo: [
          {required: true, message: '请输入学号', trigger: 'blur'},
        ],
      }
    }
  },
  methods: {
    addStudent() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          addOrEditStudent(this.form).then(response => {
            if (response.code == 200) {
              this.$message.success(response.message)
              this.dialogFormVisible=false
              this.initPage()
            } else {
              this.$message.error(response.message)
            }
          })
        } else {
          this.$message.error('请填写表单数据')
          return false;
        }
      });
    },
    /*编辑回调*/
    handleEdit(index, row) {
      this.title = "编辑"
      this.dialogFormVisible = true
      // 数据回显
      this.form = row
    },
    /*删除回调*/
    handleDelete(index, row) {
      this.$confirm('此操作将永久删除当前行数据, 是否继续?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delStudents([row.id]).then(response => {
          if (response.code == 200) {
            this.$message.success(response.message)
            // 重载表格数据
            this.initPage()
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /*rows表示选中行数据*/
    handleSelectionChange(rows) {
      /*通过map遍历实现筛选行数据   只保存行数据中的id*/
      this.multipleSelection = rows.map(v => v.id)
    },
    /*每页展示的条数改变时触发*/
    handleSizeChange(val) {
      this.size = val
      // TODO  发送http请求  获取分页数据
      this.initPage()
    },
    /*页码改变时触发*/
    handleCurrentChange(val) {
      this.currentPage = val
      // TODO  发送http请求  获取分页数据
      this.initPage()
    },
    add() {
      this.dialogFormVisible = true
    },
    batchDel() {
      if (this.multipleSelection.length == 0) {
        this.$message.warning('请至少选择一条数据...')
        return false
      }
      // 发送http请求  删除选中行数据
      delStudents(this.multipleSelection).then(response => {
        if (response.code == 200) {
          this.$message.success(response.message)
          // 重载表格数据
          this.initPage()
        } else {
          this.$message.error(response.message)
        }
      })
    },
    clearInfo() {
      // 清除校验信息
      this.$refs.addForm.clearValidate()
      this.title = "新增"
      this.form = {
        id: '',
        stuName: '',
        stuNo: '',
        age: '',
        sex: '',
        major: '',
        schoolTime: ''
      }
    },
    // 数据分页函数
    initPage() {
      // 发送一个学生信息分页的请求
      studentPage(this.currentPage, this.size).then(response => {
        if (response.code == 200) {
          this.total = response.total
          this.tableData = response.tableData
        } else {
          this.$message.warning('数据查询失败')
        }
      })
    }
  },
  created() {
    this.initPage()
  }
}
</script>

<template>
  <!--
   data : 声明表格中需要展示的数据
   prop: 声明需要渲染对象中的哪个属性值
   -->
  <div id="container">
    <div id="header-btn">
      <el-button size="small" type="primary" plain @click="add">新增</el-button>
      <el-button size="small" type="danger" plain @click="batchDel">批量删除</el-button>
    </div>
    <el-table
        @selection-change="handleSelectionChange"
        :data="tableData"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="ID"
      >
      </el-table-column>
      <el-table-column
          prop="stuNo"
          label="学号"
      >
      </el-table-column>
      <el-table-column
          prop="stuName"
          label="姓名"
      >
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别">
      </el-table-column>
      <el-table-column
          prop="major"
          label="专业">
      </el-table-column>
      <el-table-column
          prop="schoolTime"
          label="入学时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div id="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="size"
          :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <!--  模态窗-->
    <div id="dialog">
      <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="clearInfo">
        <el-form :model="form" :rules="rules" ref="addForm">
          <el-input type="hidden" v-model="form.id"></el-input>
          <el-form-item label="学号" :label-width="formLabelWidth" prop="stuNo">
            <el-input v-model="form.stuNo" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth" prop="stuName">
            <el-input v-model="form.stuName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="form.age" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-select v-model="form.sex" placeholder="请选择" style="width: 100%">
              <el-option :label="男" value="男"></el-option>
              <el-option :label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专业" :label-width="formLabelWidth">
            <el-input v-model="form.major" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="入学时间" :label-width="formLabelWidth">
            <el-date-picker
                style="width: 100%"
                v-model="form.schoolTime"
                align="right"
                type="date"
                placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addStudent">确 定</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<style scoped>
#container {
  box-sizing: border-box;
  padding: 20px;
}

#pagination {
  margin-top: 20px;
}

#header-btn {
  text-align: left;
  margin-bottom: 20px;
}

#dialog {
  text-align: left;
}
</style>